<template>
  <div id="myServiceApplication" class="person-detail">
    <div>
      <van-nav-bar title="我的服务申请" :fixed="true" left-arrow @click-left="back" />
    </div>
    <div>
      <van-pull-refresh v-model="isLoading" success-text="刷新成功" @refresh="onRefresh">
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
          <div v-for="(item, index) in datas" :key="index" class="myServiceApplication-row" @click="
            $router.push({ path: '/work/specialService/applicationDetails',query:{id:item.id}})
          ">
            <div>
              <p class="myServiceApplication-name">
                {{ item.applyUser }}
              </p>
              <p class="myServiceApplication-date">
                {{ item.creationDate }}
              </p>
            </div>
            <div>
              <van-tag type="warning" v-if="item.applyStatus == 1">待审核</van-tag>
              <van-tag type="success" v-if="item.applyStatus == 2">通过</van-tag>
              <van-tag type="danger" v-if="item.applyStatus == 3">驳回</van-tag>
            </div>
          </div>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>
<script>
  import mine from "@/controller/mine.js";
  import constant from "@/controller/constant.js";
  export default {
    name: "myServiceApplication",
    components: {},
    data() {
      return {
        datas: [],
        loading: false,
        finished: false,
        isLoading: false,
        count: 1,
      };
    },
    computed: {},
    created() {},
    mounted() {},
    methods: {
      onLoad() {
        this.getList();
      },
      onRefresh() {
        this.datas = []
        this.count = 1
        this.getList()
      },
      getList() {
        let data = {
          curPage: this.count,
          pageSize: (this.count) * 10,
        };
        mine.spServiceApply_v1_list_frontEnd(data).then(res => {
          if (res.code === "0") {
            if (
              (res.datas && res.datas.records.length === 0) ||
              res.datas === null
            ) {
              this.loading = false;
              this.isLoading = false;
              this.finished = true;
              return;
            }
            this.datas = [...this.datas, ...res.datas.records];
            this.$nextTick(() => {
              this.loading = false;
              this.isLoading = false;
            });
            if (res.datas.records.length < (this.count) * 10) {
              this.finished = true;
            }
          } else {
            if (res && res.msg) {
              this.$toast(res.msg);
            } else {
              this.$toast(constant.unusualMsg);
            }
          }
        });
      },
      back() {
        this.$router.go(-1);
      }
    }
  };
</script>
<style lang="scss" scoped>
  #myServiceApplication {
    background: #fff;

    .myServiceApplication-row {
      display: flex;
      padding: 20px 0 20px 30px;
      border-bottom: 1px solid #e2e2e2;

      >div {
        width: 50%;
      }

      >div:nth-child(1) {
        >p:nth-child(2) {
          padding-top: 20px;
        }
      }
    }

    .myServiceApplication-name {
      font-size: 14px;
      font-weight: 600;
    }

    .myServiceApplication-date {
      font-weight: 300;
      opacity: 0.7;
      font-size: 12px;
    }

    .van-tag {
      //background: #dc4630;
      //color: #fff;
      float: right;
      width: 30px;
      text-align: center;
      margin-top: 15px;
      margin-right: 20px;
    }
  }
</style>